<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}停车位记录{% endblock %}</title>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <script>
        function fetchTableData() {
            $.ajax({
                url: '/api/table-data/',  // Django视图的URL
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    // 清除表格数据
                    $('#my-table tbody').empty();

                    // 遍历数据并添加到表格中
                    $.each(data, function(index, row) {
                        var tr = $('<tr></tr>');
                        // 假设MyModel有'field1'和'field2'两个字段
                        tr.append('<td>' + row.carport + '</td>');
                           if (row.parking===true){
                            tr.append('<td style="background-color: red">' + row.parking + '</td>');
                        }
                        else{
                            tr.append('<td>' + row.parking + '</td>');
                        }
                        tr.append('<td>' + row.pos + '</td>');
                        tr.append('<td>' + row.carnum + '</td>');
                        $('#my-table tbody').append(tr);
                    });
                },
                error: function(error) {
                    console.error('Error:', error);
                }
            });
        }

        // 页面加载完成后立即获取数据，并设置定时器每5秒刷新一次
        $(document).ready(function() {
            fetchTableData();  // 首次加载数据
            setInterval(fetchTableData, 1000);  // 每0.5秒刷新一次
        });
    </script>
    <!-- 视频样式 -->
{#    <style>#}
{#        #video {#}
{#            width: 500px;#}
{#            height: 500px;#}
{#        }#}
{#    </style>#}
    <style>
      .left {
        float: left;
        width: 300px;
        height: 300px;
        background-color: red;
      }
      .right {
        background-color: orange;
        margin-left:60%;
        height: 300px;
      }
    </style>
</head>
<body>
{% include 'nav.html' %}
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="d-flex flex-row" style="width: 100%; height: 423px;border:2px solid #ae00e6">
                    <div region="west" class="left" class="west" style="width:60%;height: 100%">
                        <!-- 显示视频流 -->
                        <h2>视频监控</h2>
                        <div><img src="http://127.0.0.1:8000/video" id="video"></div>
                    </div>
                    <div region="center" class="right" class="center flex-fill" style="width: 40%;height: 100%">
                        <div class="panel-footer" style="height: 490px;overflow: auto;">
                            <table class="table table-condensed" id="my-table">
                                <thead>
                                    <tr>
                                        <th>车位</th>
                                        <th>是否有车</th>
                                        <th>位置</th>
                                        <th>车牌</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <!-- 表格数据将通过Ajax动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--总统计框框-->
                 <div class="row">
                    <div class="col-sm-6 col-lg-3">
                        <div class="card">
                            <div class="card-header bg-primary">
                                <h4>A区：{{ a_total.0 }}~{{ a_total.1 }}</h4>
                                <ul class="card-actions">
                                    <li>
                                        <a href="/car_port_info/1/?start={{ a_total.0 }}&end={{ a_total.1 }}"> <i
                                                class="mdi mdi-more"></i></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <p>
                                    <strong>使用情况</strong>
                                    <strong style="float: right">{{ A_cars_use }}/{{ Asum }}</strong>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card">
                            <div class="card-header bg-danger">
                                <h4>B区：{{ b_total.0 }}~{{ b_total.1 }}</h4>
                                <ul class="card-actions">
                                    <li>
                                        <a href="/car_port_info/2/?start={{ b_total.0 }}&end={{ b_total.1 }}"> <i
                                                class="mdi mdi-more"></i></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <p>
                                    <strong>使用情况</strong>
                                    <strong style="float: right">{{ B_cars_use }}/{{ Bsum }}</strong>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card">
                            <div class="card-header bg-info">
                                <h4>C区：{{ c_total.0 }}~{{ c_total.1 }}</h4>
                                <ul class="card-actions">
                                    <li>
                                        <a href="/car_port_info/3/?start={{ c_total.0 }}&end={{ c_total.1 }}"> <i
                                                class="mdi mdi-more"></i></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <p>
                                    <strong>使用情况</strong>
                                    <strong style="float: right">{{ C_cars_use }}/{{ Csum }}</strong>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
</body>
</html>
